<!--
 * :Author: Alice.fang
 * :Date: 2022-10-14 14:33:27
 * :LastEditors: Alice.fang
 * :LastEditTime: 2022-10-21 16:18:35
 * :Description: navBar
-->
<template>
    <div>
        <el-menu :default-openeds="defaultOpenedsArray" :default-active="onRouters" :unique-opened="true" @open="handleOpen" @select="changeSidebar">
            <MenuItem v-for="(route, index) in routersList" :key="index" :item="route" :id="String(route.path).replace(/\//g, '') + 'ByTitle'" :fatherPath="route.path"></MenuItem>
        </el-menu>
    </div>
</template>

<script>
import router from '@/router';

import MenuItem from './MenuItem.vue';

export default {
    components: {
        MenuItem
    },

    data() {
        return {
            routersList: [],
            defaultOpenedsArray: []
        };
    },

    created() {
        this.routersList = router.options.routes[0].children;
    },

    computed: {
        onRouters() {
            // 需要特殊处理的路由
            const specialRoute = ['home', 'phonebook', 'sms', 'about'];
            // 获取到所有的路由
            const routes = this.routersList;
            // default-active
            let openRoute = '';
            // 当前路由
            let currentRoute = this.$route.path;
            for (const item of routes) {
                // 如果路由第一个字符串不是 /，则补上
                if (item.path[0] != '/') item.path = `/${item.path}`;
                if (item.path.toUpperCase() == currentRoute.toUpperCase()) {
                    if (item.meta && item.meta.hide) {
                        // 按斜杠分割路由
                        const routeParts = currentRoute.split('/');
                        // 特殊处理的路由
                        if (specialRoute.includes(routeParts[1])) {
                            return (openRoute = `/${routeParts[1]}`);
                        }
                        // 移除最后一个空字符串（如果路由以斜杠结尾）
                        if (routeParts[routeParts.length - 1] === '') routeParts.pop();
                        // 如果路由只有一个部分或两个部分，直接返回自身
                        if (routeParts.length <= 2) {
                            return (openRoute = currentRoute);
                        }
                        // 返回到二级路由
                        openRoute = routeParts.slice(0, 3).join('/');
                        break;
                    } else {
                        openRoute = currentRoute;
                        break;
                    }
                } else {
                    openRoute = currentRoute;
                }
            }
            return openRoute;
        }
    },

    methods: {
        changeSidebar(index, path) {
            if (index && path && path.length <= 1) {
                this.defaultOpenedsArray = [];
            }

            if (window.innerWidth < 1274) {
                this.$emit('parentCloseNav');
            }
        },
        handleOpen(key) {
            const routes = this.routersList.filter((r) => r.children);
            const currentRoute = this.$route.path;
            for (const item of routes) {
                if (key == item.path) {
                    if (item.children) {
                        let path = '';
                        if (item.children[0].path[0] != '/') path = `/${item.children[0].path}`;
                        if (!currentRoute.includes(key)) {
                            this.$router.replace(key + path);
                        }
                        break;
                    }
                }
            }
        }
    }
};
</script>
